import React from "react"
import "./Todofooter.css"
export default class Todoheader extends React.Component {

    render() {
        let { todos } = this.props;
        let total = todos.length;
        let comtotal = todos.filter(item => item.done).length;

        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" onChange={this.change} checked={total === comtotal && total !== 0} />
                </label>
                <span>
                    <span>已完成{comtotal}</span> / 全部{total}
                </span>
                <button className="btn btn-danger" onClick={this.removeall}>清除已完成任务</button>
            </div>
        )
    }
    change = (e) => {
        this.props.checkAllTodos(e.target.checked)
    }
    removeall = () => {
        this.props.removeAllTodos();
    }
}